<template>
  <div class="Background">
    <el-form
      :rules="rules"
      ref="loginForm"
      v-loading="loading"
      element-loading-text="正在登录"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :model="loginForm"
      class="loginContainer"
      @submit.prevent=""
    >
      <h3 class="loginTitle">协同办公平台</h3>
      <el-form-item prop="qq" style="width: 100%">
        <el-input
          type="text"
          auto-complete="false"
          v-model="loginForm.qq"
          placeholder="请输入QQ邮箱"
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code" style="width: 100%">
        <el-input
          type="text"
          auto-complete="false"
          v-model="loginForm.code"
          placeholder="请输入验证码"
          prefix-icon="el-icon-lock"
          style="width: 60%"
          @keyup.enter.native="submitLogin"
        ></el-input>
        <el-button
          type="primary"
          style="width: 35%;margin-left:5%"
          :loading="loadingCode"
          @click="getCode()"
          :disabled="disabledbtn"
        >
          获取验证码
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="checked">记住我</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          style="width: 100%"
          @click="submitLogin"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validateEMail } from '../utils/rules'
// import { encrypt } from '../utils/utils' // 加密函数
import AES from '../utils/utils'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        // qq: '2665724078@qq.com',
        qq: '',
        code: ''
      },
      count: 60, // 倒计时
      getcodefont: '获取验证码', // 验证码按钮的显示内容
      disabledbtn: false, // 获取验证码禁用
      loading: false, // 加载样式
      loadingCode: false, // 验证码加载样式
      checked: true,
      // 校验规则
      rules: {
        qq: [
          { required: true, message: '请输入QQ邮箱', trigger: 'blur' },
          { validator: validateEMail, message: '请输入正确的邮箱', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入登录验证码', trigger: 'blur' },
          { len: 6, message: '请输入6位数字的验证码', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    // 监听验证码按钮是否禁用
    disabledbtn: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal) {
          setTimeout(() => {
            this.disabledbtn = false
            this.getcodefont = '获取验证码'
          }, 60000)
        }
      }
    }
  },
  methods: {
    // 获取验证码
    getCode() {
      if (this.loginForm.qq) {
        this.loadingCode = true
        this.getRequest(`/common/code?qq=${this.loginForm.qq}`).then(resp => {
          if (resp) {
            this.$message.success(resp.msg)
            this.loadingCode = false
            this.disabledbtn = true
          }
        })
      } else {
        this.$message.error('请输入QQ邮箱')
      }
    },
    // 用户登录验证
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          // 跳转首页
          // this.$router.replace('/home')
          // this.$message.success('欢迎来到协同办公平台！')
          this.postRequest('/user/login', this.loginForm).then((resp) => {
            if (resp) {
              // 解密
              // resp = JSON.parse(AES.decrypt(resp))
              this.loading = false
              this.disabledbtn = false
              // const tokenStr = JSON.parse(resp.data.authentication)
              const tokenStr = resp.data.authentication
              window.sessionStorage.setItem('tokenStr', tokenStr)
              window.sessionStorage.setItem('user', JSON.stringify(resp.data.user))
              // 跳转首页
              this.$router.replace('/home')
              this.$message.success('欢迎来到协同办公平台！')
            }
          }, error => console.log(error))
        } else {
          this.$message.error('请输入所有字段！')
          return false
        }
      })
    }
  }
}
</script>

<style>
@import '../assets/css/form.css';
* {
  margin: 0;
  padding: 0;
}
.Background {
  background-image: url(../assets/login.jpg);
  background-repeat: no-repeat;
  background-size: 110% 100%;
  height: 100%;
  width: 100%;
  position: fixed;
  background-position: -40px;
}
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 150px auto;
  margin-right: 200px;
  width: 350px;
  padding: 15px 35px 15px 35px;

  box-shadow: 0 0 8px #cac6c6; /*盒子阴影设计*/
  background-color: white;
  border: 1px solid white;
}
.loginTitle {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #5da3fb;
  font: 2vw '宋体';
}
</style>
